<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="expires" content="Sunday 26 October 2008 01:00 GMT" />
    <meta http-equiv="content-language" content="zh-CN" />
    <title>Title</title>
    <link rel="stylesheet" href="js/elementui/index.css">
    <script src="js/vue.js"></script>
    <script  src="js/elementui/index.js"></script>
    <script src="js/axios.min.js"></script>
    <link rel="stylesheet" href="css/tea.css">

</head>

<body>
<div id="app">
    <el-container>
        <el-header>
        <el-row type="flex" justify="space-between">
            <el-col :span="3">
                {{username}} 你好
            </el-col>
            <el-col :span="3">
                <el-button type="warning" @click="exit">安全退出</el-button>
            </el-col>
        </el-row>
        </el-header>
        <el-container>

                <el-tree
                        node-key="id"
                        :default-expanded-keys="[4]"
                        :data="menuData"
                        :props="menuProps"
                        @node-click="menuClick"
                ></el-tree>


                <el-tabs type="card" v-model="activeid" @tab-click="handleClick" closable  @tab-remove="removeTab">
                    <el-tab-pane v-for="tab in tabs" :name="tab.id"  :label="tab.name" >
                        <iframe  width='100%' height='1800px'  frameborder="0" scrolling="no"   :src="tab.path"></iframe>
                    </el-tab-pane>
                </el-tabs>


        </el-container>
    </el-container>
</div>

</body>
<script>
    axios.defaults.headers.common['Authorization'] = "bearer " + sessionStorage.getItem("access_token");

    var Main = {

        data() {
                return {
                    activeid:'',
                    //标签
                    tabs:[],
               //菜单数据
                menuData: [],
                //菜单配置
                menuProps: {
                    children: 'children',
                    label: 'name'
                },
                    username:''


            }
        },
        methods: {
            //退出
            exit(){
                sessionStorage.clear();
                localStorage.clear();
                window.location.href="/login.html"
            },
            removeTab(name){
                this.tabs=this.tabs.filter(row=>{
                    return row.id!=name;
                })
            },
            handleClick(name){
                this.activeid=name
            },

            //显示左边树

            menuClick(data, node, target) {
                let newnode=data;
                let path=newnode.path;
                path=path.replace(".jsp",".html");
                if(newnode.children.length==0){ //判断是不是最下层节点
                    let tab={id:newnode.id+'',name:newnode.name,icon_class:newnode.icon_class,path:path};
                    for(let i=0;i<this.tabs.length;i++){
                        if(this.tabs[i].id==tab.id){
                            this.activeid=tab.id
                            return;
                        }
                    }
                     this.tabs.push(tab)
                    this.activeid=tab.id
                }
            },

            //分页
            pageChange(page) {
                this.page = page;
                this.queryCourse();
            },

            search() {
                this.page = 1;
                this.queryCourse();
            },
              //课程分页
            queryCourse() {
                axios({
                    method: 'get',
                    url: '/api/teacher/course/getPaginate',
                    params: {
                        page: this.page,
                        pageSize: this.pageSize,
                        courName: this.cour_name
                    }
                })
                    .then(res => {
                            let data = res.data;

                            this.total = data.totalElements;
                            this.tableData = data.content;
                        }
                    )

            },
             //菜单显示
            queryMenu() {
               axios({
                    method: "get",
                    url: "/api/teacher/course/getMenu"
                }).then(res => {
                    res=res.data;
                    this.menuData=res.message;
                    this.menuData.unshift({
                        "id": Date.parse(new Date()),
                        "name": "个人中心",
                        "parentId": 0,
                        "path": "/teacher/personal.html",
                        "weight": 8,
                        "iconClass": null,
                        "children": []
                    })
                })
            },

        },
        mounted() {
            this.username=sessionStorage.getItem("username")
            //初始化菜单
            this.queryMenu();
            //this.changTree();
        }
    }

    var Component = Vue.extend(Main)
    new Component().$mount('#app')
</script>

</html>
